<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>意见反馈</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        header.aui-bar {
            background: #fff;
        }

        .aui-title {
            color: #000;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #327afa !important;
        }

        .active {
            color: #327afa !important;
        }

        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        .send {
            font-size: 12px !important;
        }

        .contain {
            /*margin-top: 15px;*/
        }

        /*下面弹出的样式*/
        .pickerToTop {
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(188px);
            transform: translateY(188px);
            height: 188px;
            overflow-y: auto;
            -webkit-transition: .5s;
            transition: .5s;
            z-index: 999;
            width: 100%;
            text-align: center;
        }

        .toTopAnimate {
            -webkit-transform: translateY(00px);
        }

        .myBorder {
            height: 8px;
            background: #797979;
        }

        .tips {
            height: 35px;
            line-height: 35px;
            padding: 0 15px;
            margin: 0;
        }

        .aui-list-view {
            margin: 0;
        }

        textarea {
            margin: 0;
            height: 150px;
            overflow-y: auto;
        }

        .sumRed {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        意见反馈
    </div>
    <div class="aui-pull-right aui-iconfont send" onclick="send()">发送</div>
</header>

<div class="contain">
    <ul class="tips">
        <li>
            问题类型
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell" tapmode data-type="offer" onclick="showPicker(this)">
            <a class="aui-arrow-right problemType">
                请选择您的反馈类型
            </a>
        </li>
    </ul>
    <ul class="tips">
        <li>
            问题和意见
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <textarea class="problemText" oninput="checkWord(this)" onpropertychange="checkWord(this)"
                      placeholder="请告诉我们您的意见和建议，帮助我们改进和提高"></textarea>
            <span class="aui-pull-right">
                    <em class="sum ">0</em>/200
                </span>
        </li>
    </ul>

</div>
<div class="pickerToTop">

    <ul class="aui-list-view setOffer">
        <li class="aui-list-view-cell" data-type="format" tapmode onclick="setType(this)">
            问题反馈
        </li>
        <li class="aui-list-view-cell" data-type="single" tapmode onclick="setType(this)">
            功能建议
        </li>
        <li class="aui-list-view-cell" data-type="single" tapmode onclick="setType(this)">
            其它
        </li>

        <li class=" myBorder">

        </li>
        <li class="aui-list-view-cell " tapmode onclick="hidePicker()">
            取消
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript" src="../../script/toastr.js"></script>
<script type="text/javascript">


    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(obj){
        mask.show();
        //执行跨域execScript
        $(".pickerToTop").addClass("toTopAnimate");
    }
    // 关闭遮罩
    function hidePicker(){
        $(".pickerToTop").removeClass("toTopAnimate");
        mask.myclose();
    }
    var hasCheckWord=false,hasChoose=false;
    //设置问题类型
    function setType(obj){
        hasChoose=true;
        $(".problemType").text($(obj).text());
        $(".problemType").attr({"data-type":"hasChecck"});
        hidePicker();
    }
    function checkWord(obj){
        var len=$(obj).val().length;
        $(".sum").text(len);
        var value=$(obj).val();
        if(len>=200){
            hasCheckWord=false;
            $(obj).val(value.substring(0,200));
            $(".sum").addClass("sumRed");
            toastr.success("字数已超过200");
        }else{
            hasCheckWord=true;
            $(".sum").removeClass("sumRed");
        }
    }
    function send() {
        if(hasCheckWord && hasChoose){
            //发送问题
            alert("已发送");
        }else if(!hasCheckWord){
            toastr.success("请重新填写问题");
        }else if(!hasChoose){
            toastr.success("请选择问题类型");
        }
    }
</script>
</html>
